@extends("admin.layout.main")

@section("content")
<div id="app" style="width: 100%">
    {{-- 删除modal --}}
    <Modal v-model="delModal" width="360">
        <p slot="header" style="color:#f70;text-align:center">
            <span>删除确认</span>
        </p>
        <div style="text-align:center">

            <p>确定要删除吗?</p>
        </div>
        <div slot="footer">
            <i-button type="error" size="large" long  @click="del">删除</i-button>
        </div>
    </Modal>
   {{-- 角色modal--}}
    <Modal v-model="roleModal" width="500">
        <p slot="header" style="color:#f70;text-align:center">
            <span>角色弹框</span>
        </p>
        <div >
            <p class="x-margin-10"><label>角色名称 : </label><br> <i-input v-model="name" style="width:220px"></i-input></p>
            <div class="x-margin-10">
                <div><label>绑定权限 : </label></div>

                <div style="text-align: center;border:1px solid #e9e9e9;padding: 6px">
                    <div style="border-bottom:1px solid #e9e9e9;">
                        <Checkbox
                                v-model="checkAll" @on-change="checkAllBox">全选
                        </Checkbox>
                    </div>
                    <Checkbox-Group v-model="permission_ids"  style="padding-top: 10px">

                        <Checkbox :label="item.id" v-for="item of origin_permissions"><span>@{{ item.name }}</span></Checkbox>
                    </Checkbox-Group>
                </div>
            </div>


        </div>
        <div slot="footer">
            <i-button type="primary" size="large" long  @click="submit">保存</i-button>
        </div>
    </Modal>

    {{--主体代码--}}
    <Row type="flex" justify="center" align="middle">

        <i-col span="23" >
            <span>
                 <i-button type="primary" @click="roleModalUp()">添加角色</i-button>
            </span>
            <span>
                 <i-button type="error" @click="delModalUp()">批量删除</i-button>
            </span>
        </i-col>

    </Row>
    <Row  justify="center" align="middle" >
        <i-col  style="margin-top: 20px;width: 100%">
            <i-table  ref="selection" :data="tableData" :columns="tableColumns" >
            </i-table>
        </i-col>
    </Row>

    <Row type="flex" justify="center" class="code-row-bg">
        <i-col>
            <Page
                    size="small"
                    :total="page.total"
                    :current="page.current"
                    :page-size="page.pageSize"
                    show-total
                    show-elevator
                    @on-change="roleList">

            </Page>
        </i-col>
    </Row>



</div>
<script src="/js/vue.js"></script>
<script  src="/js/iview.js"></script>
<script  src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                delModal:false,
                roleModal:false,
                checkAll: false,
                token:'',
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '角色名',
                        key: 'name',

                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            let row = params.row;
                            return h('div', [
                                h('i-button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': ()=>{
                                            permissions = [];
                                            if(row.permissions.length > 0){
                                                for(let i in row.permissions){
                                                    permissions.push(row.permissions[i].id);
                                                }
                                            }

                                            this.roleModalUp(row.name,row.id,permissions);
                                        }

                                    }

                                }, "编辑"),
                                h('i-button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': ()=>{
                                            this.delModalUp(row.id);
                                        }
                                    }

                                }, "删除"),


                            ]);
                        }
                    }
                ],
                page: {
                    total: 0,
                    current: 1,
                    pageSize: 20,
                },
                tableData: [],
                name:'',
                id:'',
                batch_ids:[],
                permission_ids:[],
                origin_permissions:[],
            }
        },
        mounted(){

            this.$Message.config({
                top: 90,
                duration: 3
            });
        },
        methods:{
            roleModalUp(name = '',id = '',permissions = []){
                this.permission_ids = permissions;
                this.name = name;
                this.id = id;
                this.roleModal = true;
            },
            delModalUp(id = ''){
                batch_ids = [];
                if(id){
                    batch_ids = [id];
                }else{
                    batch_ids = this.batch();
                    if(batch_ids.length == 0){
                        this.$Message.info('请先勾选');
                        return false;
                    }

                }
                this.batch_ids = batch_ids;
                this.delModal = true;
            },
            batch() {
                let ids = [];
                this.$refs.selection.getSelection().map(item => {
                    ids.push(item.id);
                });
                return ids;
            },
            roleList(page){
                axios.get('/admin/role/list', {
                    params: {
                        token:vm.token,
                        page: page,
                    }
                }).then((response) => {
                    vm.tableData = response.data.result.data;
                    vm.page.total = response.data.result.total;
                    vm.page.current = response.data.result.current_page;
                    vm.page.pageSize = response.data.result.per_page;
                })
            },
            permissionList(){
                axios.get('/admin/permission/list', {
                    params: {
                        token:vm.token,
                    }
                }).then((response) => {
                    data = response.data;
                    if(data.code == 200){
                        vm.origin_permissions = [...data.result.list];
                    }
                })
            },
            submit(){
                that = this;

                axios.post('/admin/role/store',
                    {
                        id:that.id,
                        name:that.name,
                        permission_ids:that.permission_ids,
                        token:that.token,
                    }
                ).then(response => {
                    if(response.data.code == 200){
                        that.roleModal = false;
                        that.$Message.success('操作成功');
                        setTimeout(function () {
                            that.roleList(1);
                        },500);
                    }else{
                        that.$Message.error(response.data.msg);
                    }
                }).catch(e => {
                    that.$Message.error('服务器异常');
                });
            },
            del(){
                that = this;

                axios.post('/admin/role/del',
                    {
                        ids:that.batch_ids,
                        token:that.token,
                    }
                ).then(response => {
                    that.delModal = false;
                    if(response.data.code == 200){
                        that.$Message.success('操作成功');
                        setTimeout(function () {
                            that.roleList(1);
                        },500);
                    }else{
                        that.$Message.error(response.data.msg);
                    }
                }).catch(e => {
                    that.$Message.error('服务器异常');
                });
            },
            //全选按钮
            checkAllBox(){
                if(this.checkAll == true){
                    if(this.origin_permissions.length > 0){
                        this.permission_ids = [];
                        for(var i in this.origin_permissions){
                            this.permission_ids.push( this.origin_permissions[i].id);
                        }
                    }
                }else{
                    this.permission_ids = [];
                }
            },

        },
        watch:{
            permission_ids(){
                if(this.origin_permissions.length == this.permission_ids.length && this.origin_permissions.length > 0){
                    this.checkAll = true;
                }else{
                    this.checkAll = false;
                }
            }
        }


    })
    vm.token = getToken();
    vm.roleList(1);
    vm.permissionList();
</script>

@endsection

